<script setup lang="ts">
import { ref } from 'vue'
import radioCell from '@/components/radio-cell.vue'

const emit = defineEmits(['close'])
const show = ref(false)
defineExpose({
  show,
})
const rules = {
  phoneTel: [
    { required: true, message: '请输入手机号' },
    { required: true, pattern: /^1[3-9]\d{9}$/, message: '请输入正确的手机号' },
  ],
  verifCode: [
    { required: true, message: '请输入验证码' },
    { required: true, pattern: /^\d{6}$/, message: '请输入6位数字验证码' },
  ],
}
const safePhoneRef = ref()
const safePhoneForm = reactive<{
  phoneTel: string
  verifCode: string
}>({
  phoneTel: '',
  verifCode: '',
})
function safePhoneSubmit() {
  safePhoneRef.value
    .validate()
    .then(({ valid, errors }) => {
      console.log('校验通过')
    })
    .catch((error) => {
      console.log(error, 'error')
    })
}
function handleClose() {
  show.value = false
  if (safePhoneRef.value) {
    safePhoneRef.value.reset()
  }
}
</script>

<template>
  <wd-popup v-model="show" lock-scroll position="bottom" :safe-area-inset-bottom="true" closable custom-style="height: 600rpx;overflow: hidden;border-radius: 32rpx 32rpx 0 0;" @close="handleClose">
    <view class="wot-form-title">
      商户【 安全手机 】
    </view>
    <wd-form ref="safePhoneRef" class="i-form" :model="safePhoneForm" :rules="rules">
      <wd-cell-group>
        <wd-input
          v-model="safePhoneForm.phoneTel"
          class="i-border-b"
          label="手机号"
          label-width="120rpx"
          prop="phoneTel"
          clearable
          placeholder="请输入手机号"
        />
        <wd-cell prop="verifCode" title="验证码" required title-width="120rpx" custom-value-class="cell-left">
          <view class="flex">
            <wd-input
              v-model="safePhoneForm.verifCode"
              no-border
              custom-style="display: inline-block; flex:1; vertical-align: middle"
              placeholder="请输入验证码"
            />
            <view class="code-btn">
              获取验证码
            </view>
          </view>
        </wd-cell>
      </wd-cell-group>
      <view class="mx-auto mt-60rpx w-80%">
        <wd-button class="i-btn" type="primary" size="small" custom-class="login-btn" block @click="safePhoneSubmit">
          保存
        </wd-button>
      </view>
      <view class="tips">
        安全手机用于商户在重要操作时的短信验证,如: 数据清除, 设备转出或解绑, 商户注销等操作进行验证
      </view>
    </wd-form>
  </wd-popup>
</template>

<style lang="scss" scoped>
.desc{
    padding: 40rpx 20rpx;
    line-height: 40rpx;
    font-size: 24rpx;
    color: #ED6A0C;
}
.code-btn{
              background-color: #3287e1;
              color: #fff;
              font-size: 24rpx;
              margin-left: 10px;
              width: 70px;
              text-align: center;
              border-radius: 4px;
            }
            .tips{
                padding: 20rpx;
                line-height: 40rpx;
                font-size: 24rpx;
                color: #ED6A0C;
            }
</style>
